<template>
  <div class="particle-container">
    <video id="video-bg" autoplay muted loop playsinline />
    <canvas id="canvas-content" width="1200px" height="690px" style="width: 1200px; height: 690px;">
      你的浏览器不支持Canvas
    </canvas>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const videoRef = ref<HTMLVideoElement>()
const canvasContent = ref<HTMLCanvasElement>()
import { useParticle } from '@vivid-ui/utils/useParticle';
onMounted(() => {
  videoRef.value = document.getElementById('video-bg') as HTMLVideoElement
  videoRef.value.src = "/src/assets/bg.mp4"
  canvasContent.value = document.getElementById('canvas-content') as HTMLCanvasElement
  const { particles } = useParticle({
    canvas: canvasContent.value,
    number: 50,
    radius: 2.5,
    mouseRadius: 200,
    speend: 2,
    color: 'rgb(254,250,224)',
    line: 150,
  })
})

</script>

<style scoped lang="scss">
.particle-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: transparent;
  overflow: hidden;
}

#video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

#canvas-content {
  position: absolute;
  z-index: 1;
}
</style>
